<template>
    <nly-content-wrapper class="content-warpper-2">
        <div class="content-header-2" >
            <div class="header">
                <span class="name">套餐名称：{{billData.baseSettingName || "未选择"}}</span>
                <span class="bt">
                    <a-button type="primary" size="small" @click="goToSelect" v-show="!billData.id">选择</a-button>
                    <a-button type="primary" size="small" @click="goToSelect" v-show="billData.id">变更</a-button>
                </span>
            </div>
        </div>
        <nly-content>
            <a-tabs  v-model="activeKey" @change="callback" class="tab-class">
                <a-tab-pane :key="1" tab="套餐余额">
                    <a-descriptions title="" layout="vertical" bordered :column="{ xxl: 6, xl: 6, lg: 6, md: 5, sm: 4, xs: 3 }">
                        <a-descriptions-item label="套餐名称">
                        {{billData.baseSettingName}}
                        </a-descriptions-item>
                        <a-descriptions-item label="固定分钟数">
                        {{billData.baseMinutes}}
                        </a-descriptions-item>
                        <a-descriptions-item label="套餐内使用分钟数">
                        {{billData.baseMinutesUsed}}
                        </a-descriptions-item>
                        <a-descriptions-item label="超出分钟数">
                            <span style="color: #F59A23;font-weight: 700;">{{billData.otherMinutes}}</span>
                        </a-descriptions-item>
                        <a-descriptions-item label="超出分钟数费率">
                        {{billData.price || "xx"}} 元/分钟
                        </a-descriptions-item>
                        <a-descriptions-item label="超出部分总金额" :span="3">
                            <span style="color: #F59A23;font-weight: 700;"> {{otherAmount}} 元</span>
                        </a-descriptions-item>
                        <a-descriptions-item label="总金额">
                            <span style="color: #F59A23;font-weight: 700;">{{billData.orderAmount}}</span>
                        </a-descriptions-item>
                    </a-descriptions>
                </a-tab-pane>
            </a-tabs>
            
        </nly-content>  
    </nly-content-wrapper>
</template>

<script>
import { mapState } from "vuex";
import { getByCompany} from "@/api/crm/call/callBaseSettingInfo";
import { getCurrentBillByCompany} from "@/api/crm/call/callBill";

export default {
    data () {
        return {
            activeKey:1,
            billData:{},
        };
    },
    created(){
    },
    mounted(){
    },
    activated(){
        this.reLoadData();
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.info,
            permissions: state => state.user.permissions,
        }),
        otherAmount:function(){
            let { otherMinutes,price} = this.billData;
            if(!otherMinutes || !price)return 0.00;
            return (otherMinutes*price).toFixed(2);
        },
    },
    watch: {
    },
    methods: {
        goToSelect(){
            this.$router.push("/crm/call/changeBaseSetting");
        },
        reLoadData(){
            this.getCurrentBillByCompany();
        },
        //获取当前账单
        getCurrentBillByCompany () {
            getCurrentBillByCompany().then(response => {
                if (response.code === 200) {
                    const { data } = response;
                    if(data){
                        this.billData = data;
                    }
                }
            }).catch(error => { });
        },
    }
};
</script>
<style lang="less" scoped>
    /deep/.ant-descriptions-item-label {
    background-color: #dbdbdb !important;
    }
    .border-t-95{
        border-top: 1px solid #e8e8e8; 
    }
    .detail-box{
        border: 1px solid #e8e8e8;
        background: #fff;
        border-radius: 2px;
        position: relative;
        box-sizing: border-box;
        color: rgba(0,0,0,.65);
        line-height: 1.5;
        font-size: 14px;
        margin-top:-5px;
        margin: 0px 10% 10px 10%;
        .detail-header{
            padding: 14.5px 24px;
            // background: #f2f3f5;
            border-bottom: 1px solid #e8e8e8;
            color: rgba(0,0,0,.85);
            min-height: 40px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 2px 2px 0 0;
        }
        .detail-content{
            padding: 8px 24px 3px 24px;
            .detail-item{
                margin-bottom: 5px;
                .detail-title{
                    display: inline-block;
                    width: 120px;
                    margin-right: 8px;
                    color: #7b7979;
                }
                .detail-text{
                    color: #333 !important;
                }
            }
        }
    }
    // 头部
    .header{
        margin: 5px 20px;
        .bt{
            margin-left: 10px;
        }
    }
</style>